<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" href="../../css/animate.css">
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <link rel="stylesheet" href="../../css/mescroll.css">
  <link rel="stylesheet" href="../../css/gloab.css">
  <title>空间</title>
  <style media="screen">
  .zz-images{
    width:85%;
    height:3rem;
    margin:0.2rem auto;
    background: #eee;
    /*overflow: hidden;*/
  }
  .zz-images img{
    width:100%;
    height: 100%;
  }
  </style>
</head>
<body>
  <div id="app">
    <div id="public-header">
      <div id="statusbar"></div>
      <header class="public-header">
        <div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
        <div class="public-header-title">站长空间</div>
      </header>
    </div>
    <div class="product-category-list" id="nav" style="height:2rem;">
      <div class="product-category-list-son" style="box-shadow:none;">
        <div class="product-category-list-header flex wrap" v-for="item in spacedata">
            <div class="product-category-list-header-lf" style="height:1.1rem;">
              <img src="../../image/public/touxiang.png" alt="" v-if="!item.userdata.avatar">
              <img :src="item.userdata.avatar" alt="" v-else>
              <label class="product-category-list-header-label" style="padding:0.01rem 0;" v-if="item.userdata['Identity']==1">{{item.userdata['Identity']}}</label>
              <label class="product-category-list-header-label zzlabel" v-if="item.userdata['Identity']==2">站长</label>
            </div>
            <div class="product-category-list-header-rt">
              <div class="product-category-list-header-name flex wrap">
                <div class="product-category-list-header-name-lf F2">{{item.userdata['name']}}</div>
                <!-- <div class="product-category-list-header-name-look F1"><span>查看二维码</span></div> -->
              </div>
              <div class="product-category-list-header-name flex">
                <div class="guanggao-details-head-rt flex wrap">
                  <div class="guanggao-details-head-rt-son" style="width:100%;">注册时间：<span>{{item.userdata['createtime']}}</span></div>
                  <div class="guanggao-details-head-rt-son" style="width:100%;">微信号：<span>{{item.userdata['wechat']}}</span></div>
                  <div class="guanggao-details-head-rt-son" style="width:100%;">发布：<span style="color:#4f9cf6;">{{item.num}}</span></div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div id="mescroll" class="mescroll">
      <div>
    <div class="product-category-list auto" v-for="(item,index) in spacedata">
      <div class="product-category-list-son">
          <div v-for="data in item.list">
            <div class="product-category-list-header flex wrap">
                <div class="product-category-list-header-lf" style="height:0.84rem;">
                  <img src="../../image/public/touxiang.png" alt="" v-if="!item.userdata.avatar">
                  <img :src="item.userdata.avatar" alt="">
                </div>
                <div class="product-category-list-header-rt">
                  <div class="product-category-list-header-name flex">
                    <div class="product-category-list-header-name-lf F5" style="margin-top:0.16rem;">{{item.userdata['name']}}</div>
                    <div class="product-category-list-header-name-rt F2" style="margin-top:0.16rem;">
                        <span style="border:none;color:#3398ff;text-decoration:underline;"  @click="aboutcontet(data.id)">详情&nbsp;></span><br>
                    </div>
                  </div>
                </div>
            </div>
            <div v-if="data.image&&data.image.length>0">
              <!-- <div v-if="webList&&webList.length>0" v-for="(item,index) in webList"> -->
                <div class="zz-images" style="position:relative;top:0;">
                   <img :src="apiUrl+data.image" alt="">
                </div>
            </div>
          </div>
      </div>
    </div>
    </div>
  </div>
  </div>
  <div class="public-progress" style="z-index:9;">
    <img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/mescroll.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/jsencrypt.js"></script>
<script src="../../script/fastclick.js"></script>

<script>
var vm;
var mescroll;
var mySwiper;
apiready=function(){
  api.removeLaunchView();
  setBar("statusbar");
  setFont(750);
  startVue();
  NewMescroll();
  var top=$("#public-header").outerHeight(true)+$("#nav").outerHeight(true)+20;
  $("#mescroll").css({"top":top+"px"});
  $(".public-progress").fadeOut(1000);
  setTimeout(function(){
    $(".public-progress").css({"display":"none"});
  },1000);
}
function startVue(){
  vm = new Vue({
    el:"#app",
    data:{
      gdtt:["","","","","",""],
      spacedata:[],
      page:0,
      showpage:10,
    },
    created:function(){
    },
    mounted:function(){

    },
    methods:{
      seeImg:function(item,items){
        var array = [];
        for (var i = 0; i < item.images.length; i++) {
          array.push(apiUrl+item.images[i]);
        }
        var photoBrowser = api.require('photoBrowser');
        photoBrowser.open({
            images:array,
            placeholderImg: 'widget://res/img/apicloud.png',
            bgColor: '#000'
        }, function(ret, err) {
			if(ret.eventType == 'longPress'){ save_img(array); }
          if (ret.eventType=='click') {
            var photoBrowser = api.require('photoBrowser');
            photoBrowser.close();
          }
        });
      photoBrowser.setIndex({
          index: items
      });
      },
      more:function(obj){
        if(obj.num){
          vm.page++;
        }else{
          vm.page=0;
          mescroll.lockUpScroll(false);
        }
        vm.kongjiant();
      },
      kongjiant:function(){
        var id=api.pageParam['id'];
        api.ajax({
            url: apiUrl+'api/Perspace/perspaceSelects',
            method: 'post',
            data: {
                values: {
                    id:id,
                    page:vm.page,
                    showpage:vm.showpage,
                },
            }
        },function(ret, err){
          if (ret.status) {
            vm.spacedata=ret.data;
          }else {
            if(vm.page!=0){
              msg("我也是有底线的！");
            }else{
              vm.spacedata = "";
              msg("暂无数据");
            }
          mescroll.lockUpScroll(true);
        }
        mescroll.endUpScroll(false);
        mescroll.endSuccess();
        });
      },
      //详情
      aboutcontet:function(id){
        var id=id;
        var uid=api.pageParam['uid'];
          api.openWin({
            name: 'zzggxq',
            url: './zzggxq.html',
            reload:true,
            pageParam: {
                uid:uid,
                id:id
            }
        });
      },
      //全文
      allcontent:function() {
        var id=id;
        var uid=api.pageParam['uid'];
          api.openWin({
            name: 'quan',
            url: '../personal/guanggao_details.html',
            reload:true,
            pageParam: {
                uid:uid,
                id:id
            }
        });
      }
    }
  })
}
function NewMescroll(){
  mescroll = new MeScroll("mescroll", {
      down:{
        use:true,
        auto:true,
        // autoShowLoading:true,
        callback:vm.more, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      },
      up:{
        use:true,
        auto:false,
        lazyLoad: {
          use: true, // 是否开启懒加载,默认false
          attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图  src='占位图''/>
          showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
          delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
          offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
        },
        callback:vm.more, //上拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      }
    })
}
</script>
</html>
